<template>
  <el-col class="bill">
    <el-col class="title">新增出库</el-col>

    <el-col class="content">
      <div>
        <div>
          出库时间
          <span>*</span>
        </div>
        <el-date-picker
          v-model="form.out_time"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>
      <div>
        <div>
          出库类型
          <span>*</span>
        </div>
        <div>
          <el-radio v-model="form.class" label="成品">成品</el-radio>
          <el-radio v-model="form.class" label="茶叶">茶叶</el-radio>
          <el-radio v-model="form.class" label="礼盒">礼盒</el-radio>
        </div>
      </div>
      <div class="control">
        <el-button type="primary" plain @click="BasicDataDialog"
          >添加</el-button
        >

        <el-upload
          class="upload-demo"
          name="file"
          action="/api/admin/crm_importOut"
          :headers="this.headers"
          :data="this.form"
          :on-success="handleSuccess"
          :show-file-list="false"
        >
          <el-button type="primary" plain>导入</el-button>
        </el-upload>
      </div>
      <el-table :data="repertoryList" border stripe size="small">
        <el-table-column label="商品名称" width="300">
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="出库数量">
          <template slot-scope="scope">
            <el-input v-model="scope.row.good_num" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="金额">
          <template slot-scope="scope">
            <el-input v-model="scope.row.money" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="备注">
          <template slot-scope="scope">
            <el-input v-model="scope.row.info" size="mini"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="handleNew">确定</el-button>
        <el-button type="info" @click="handleClear">清空</el-button>
      </div>
    </el-col>

    <el-dialog
      title="基础资料"
      :visible.sync="basicDataShow"
      :modal-append-to-body="false"
      :show-close="false"
      width="64%"
      center
    >
      <div class="basic_data">
        <el-table
          ref="multipleTable"
          :data="inventoryList"
          tooltip-effect="dark"
          width="64%"
          @selection-change="selectionChange"
        >
          <el-table-column type="selection" width="100"> </el-table-column>
          <el-table-column label="商品名称" width="300">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column label="剩余库存">
            <template slot-scope="scope">{{ scope.row.inventory }}</template>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="handleSelect">确定</el-button>
          <el-button type="info" @click="cancelSelect">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      basicDataShow: false,
      form: {
        out_time: "",
        class: "",
      },
      inventoryList: [],
      selectList: [],
      repertoryList: [],
      headers: {},
    };
  },
  mounted() {
    let header = sessionStorage.getItem("user");
    let headers = JSON.parse(header);
    if (headers) {
      this.headers["X-Access-Token"] = headers.token;
      this.headers["X-Access-Uid"] = headers.id;
    }
  },
  methods: {
    BasicDataDialog() {
      this.selectList = [];
      this.basicDataShow = true;
      this.get_inventoryList();
    },
    selectionChange(val) {
      this.selectList = val;
    },
    handleSelect() {
      if (this.repertoryList.length) {
        this.selectList.forEach((element, index) => {
          this.repertoryList.forEach((item) => {
            if (element.good_id === item.good_id) {
              this.selectList.splice(index, 1);
            }
          });
        });

        this.selectList.forEach((item) => {
          let value = {
            good_id: item.good_id,
            name: item.name,
            good_num: "",
            money: "",
            info: "",
          };
          this.repertoryList = [...this.repertoryList, value];
        });
      } else {
        this.selectList.forEach((item) => {
          let value = {
            good_id: item.good_id,
            name: item.name,
            good_num: "",
            money: "",
            info: "",
          };
          this.repertoryList = [...this.repertoryList, value];
        });
      }

      this.selectList = [];
      this.basicDataShow = false;
    },
    cancelSelect() {
      this.selectList = [];
      this.basicDataShow = false;
    },
    handleSuccess(res) {
      if (!res.code) {
        this.$message({
          type: "success",
          message: "导入成功",
        });
        this.repertoryList = [];
        res.data.forEach((item) => {
          let value = {
            good_id: item.good_id,
            name: item.name,
            good_num: item.number,
            money: item.money,
            info: item.info,
          };
          this.repertoryList = [...this.repertoryList, value];
        });
      } else {
        this.$message({
          type: "none",
          message: res.data[0] || "导入失败",
        });
      }
    },
    async handleNew() {
      if (!this.form.out_time || !this.form.class) {
        this.$message({
          type: "none",
          message: "请完整填写表单",
        });
        return;
      }
      this.form.out_time
        ? (this.form.out_time = this.getTime(this.form.out_time))
        : "";
      let data = {
        class: this.form.class,
        out_time: this.form.out_time,
        content: JSON.stringify(this.repertoryList),
      };
      let res = await this.$store.dispatch("crm_addOutboundRecord", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "保存成功",
        });
        this.$router.push({
          path: "/home/sale",
        });
      }
    },
    handleClear() {
      this.form = {
        class: "",
        out_time: "",
      };
      this.repertoryList = [];
    },
    getTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      return year + "-" + month + "-" + day;
    },
    async get_inventoryList() {
      console.log(this.form);
      let data = {
        class: this.form.class,
      };
      let res = await this.$store.dispatch("crm_getCrmClass", data);
      if (!res.code) {
        this.inventoryList = res.data;
      }
    },
  },
};
</script>
<style lang="scss" >
.bill {
  padding: 30px;
  text-align: left;

  .content {
    > div {
      margin-top: 20px;
    }

    > div:nth-of-type(1),
    > div:nth-of-type(2) {
      display: flex;
      align-items: center;

      > div:nth-of-type(1) {
        width: 100px;

        span {
          color: #f53500;
        }
      }
    }

    .control {
      display: flex;
      align-items: center;

      > .upload-demo {
        margin-left: 20px;
      }
    }
  }

  .basic_data {
    > div:nth-of-type(1) {
      margin-bottom: 20px;
    }

    > div:nth-of-type(2) {
      display: flex;
      justify-content: center;
    }
  }
}
</style>